<template>
  <view class="catalogue">
    <view>
      <view class="catalogue-title">目录</view>
      <view class="title-ls">
        <view class="ls">题号</view>
        <view class="ls">选项</view>
        <view class="ls">跳转</view>
      </view>
    </view>
    <view class="" v-for="(data,que_index) in cashList" :key="que_index + 'kl'">
      <view class="title" :class="[que_index+1==highLight?'highLight':'']">
        {{'题目'+ (que_index+1)}}
      </view>
      <view class="selection" v-for="(item,index) in data.options" :key="index + 'pp'">
        <view class="selection_box">

        </view>
        <view class="selection_box">
          {{ENG[index]}}
        </view>
        <view class="selection_box" @mouseenter="onMouseEnter(item.nextOrder)"
          @mouseleave="onMouseLeave(item.nextOrder)">
          {{item.nextOrder}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "outline",
    data() {
      return {
        ENG: 'ABCDEFGHIJKLMNOPQRSTUVW',
        highLight: null
      };
    },
    props: ["cashList"],
    created() {
      console.log("创建了大纲循环组件，传进了参数");
    },
    methods: {
      onMouseEnter(index) {
        this.highLight = index
        // console.log('鼠标进入', index);
      },
      onMouseLeave(index) {
        this.highLight = null
        // console.log('鼠标离开', index);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    font-weight: 600;
  }

  .highLight {
    color: red;
  }

  .catalogue {
    width: 400px;
    margin: 15px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // border-radius: 10px;
    border: 1rpx solid black;

    .catalogue-title {
      font-size: 20px;
      padding: 20px;
      text-align: center;
      // font-weight: 600;
    }



    .title-ls {
      width: 100%;
      display: flex;

      .ls {
        width: 33.33%;
        border: 1rpx solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70rpx;
      }
    }

  }

  .selection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60rpx;

    .selection_box {
      width: 33.33%;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1rpx solid #525252;
    }
  }
</style>